<template>
	<view class="body">
		<h2>发布</h2>
		<view class="titleInput">
			<p class="title">标题:</p>
			<input class="uni-input" focus placeholder="输入标题" v-model="videoTitle" />
		</view>
		<view class="briefInput">
			<p class="title">简介:</p>
			<textarea @blur="bindTextAreaBlur" auto-height placeholder="输入视频简介" v-model="videoInfo" />
		</view>
		<view class="uploadBox">
			<view>
				<p class="titleT">选择视频</p>
				<view class="upload video" @click="chooseVideo()">
					<img class="icon" src="../../static/icon/increase.png">
					<video class="preview" ref="video" :src="video.prev" v-show="video.show"></video>
					<img class="close" src="../../static/icon/close_filled.png" v-show="video.show" @click.stop="close(video)">
				</view>
			</view>
			<view>
				<p class="titleT">选择封面</p>
				<view class="upload image" @click="chooseImg()">
					<img class="icon" src="../../static/icon/increase.png">
					<img class="preview" :src="image.prev" v-show="image.show">
					<img class="close" src="../../static/icon/close_filled.png" v-show="image.show" @click.stop="close(image)">
				</view>
			</view>
		</view>
		<div @click="confirm()">
			<zy-button class="button" :content="buttonContent"></zy-button>
		</div>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message :type="popup.type" :message="popup.message" :duration="popup.duration"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="borad" type="dialog">
		    <uni-popup-dialog type="base" :title="borad.title" :content="borad.message" :duration="2000" :before-close="true" @confirm="confirmBorad" @close="closeBorad"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import button from "../components/zy-button.vue";
	export default{
		data(){
			return {
				popup:{
					type:'success',
					message:'成功',
					duration:2000
				},
				borad:{
					title:'注意!',
					message:'boom'
				},
				videoTitle:"",
				videoInfo:"",
				videoTime:"",
				image:{
					prev:"",
					show:false
				},
				video:{
					prev:"",
					show:false
				},
				buttonContent:"点击上传"
			};
		},
		// watch(){
		// 	// imagePrev:(newVal,prevVal)=>{
		// 	// 	if(newVal!=""){
		// 	// 		this.imageShow = true;
		// 	// 		console.log(this.imageShow);
		// 	// 	} else {
		// 	// 		this.imageShow = false;
		// 	// 	}
		// 	// }
		// },
		methods:{
			confirm(){
				if(this.videoInfo==''||this.videoTitle==''||this.video.prev==''||this.image.prev==''){
					this.popup.type="warn";
					this.popup.message='请务必全部填全!';
					this.$refs.popup.open();
				} else {
					this.borad.message = '确认上传吗?';
					this.borad.title = '提示';
					this.$refs.borad.open();
				}
			},
			confirmBorad(done){
				this.submit();
				done();
			},
			closeBorad(done){
				done();
			},
			async submit(){
				let key = uni.getStorageSync('libilibiUserKey');
				let res1 = await uni.request({
					url:this.config.serverUrl+'/video',
					method:"POST",
					data:{
						userId:key.userId,
						token:key.token,
						videoTitle:this.videoTitle,
						videoInfo:this.videoInfo,
						videoTime:this.videoTime
					}
				});
				let videoId = res1[1].data.videoId;
				if(res1[1].data.status){
					let imgRes = await uni.uploadFile({
						name:videoId,
						url:this.config.serverUrl+'/video/uploadImg',
						filePath:this.image.prev
					})
					let videoRes = await uni.uploadFile({
						name:videoId,
						url:this.config.serverUrl+'/video/uploadVid',
						filePath:this.video.prev
					})
					this.popup.type = "success";
					this.popup.message = '上传成功！跳转个人页面ing';
					this.$refs.popup.open();
					setTimeout(()=>{
						uni.switchTab({
							url:'../mine/index'
						})
					},2000)
				}
			},
			chooseImg(){
				uni.chooseImage({
					count:1,
					sourceType: ['album','camera'],
					success:(res)=>{
						this.image.prev = res.tempFilePaths[0];
						this.image.show = true;
					}
				})
			},
			chooseVideo(){
				uni.chooseVideo({
					count:1,
					mediaType:['video'],
					success:(res)=>{
						this.video.prev = res.tempFilePath;
						this.video.show = true;
						this.videoTime = res.duration;
						console.log(res.duration);
					}
				})
			},
			close(obj){
				obj.prev="";
				obj.show=false;
			}
		},
		components:{
			"zy-button":button
		}
	}
</script>

<style lang="scss" scoped>
	.button{
		width:60%;
		margin-left:20%;
		margin-top:20px;
	}
	.body{
		width:100%;
		height:100vh;
		background-color:rgba(0,0,0,0.75);
		h2{
			text-align: center;
			font-weight:800;
			color:white;
			letter-spacing: 5px;
		}
		p{
			color:white;
		}
		display:flex;
		flex-direction: column;
		>view{
			margin:5px auto 5px;
		}
		>.titleInput{
			width:80%;
			border-bottom:1px solid white;
		}
		>.briefInput{
			width:80%;
			border-bottom:1px solid white;
			color:white;
		}
		input{
			color:white;
		}
		>.uploadBox{
			margin-top:20px;
			margin-bottom:20px;
			width:80%;
			display:flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-left:10%;
			>view{
				width:100px;
				>p{
					font-size:16px;
				}
				>.upload{
					width:60px;
					height:60px;
					margin-top:5px;
					background-color: $zy-libilibi-main;
					border-radius: 60px;
					display:flex;
					position:relative;
					>.icon{
						width:50px;
						height:50px;
						margin:auto;
					}
					>.preview{
						width:60px;
						height:60px;
						position:absolute;
						z-index:10;
					}
					>.close{
						width:16px;
						height:16px;
						position:absolute;
						z-index:11;
						right:-8px;
						top:-8px;
					}
				}
			}
		}
	}
</style>